<template>
	<view>
		<!-- 订单列表 -->
		<view class="goods-section">
			<view class="g-header b-b">
				<!-- <image class="logo" src="http://ysh-images.oss-cn-hangzhou.aliyuncs.com/test/c304a42ec72d4cc9bcc9d63ca4bd8c42.jpg"></image> -->
				<text class="name">订单号：{{ pageInfo[0].orderId }}</text>
			</view>
			<!-- 服务展示 -->
			<view class="g-item" v-for="(item,index) in pageInfo[0].sOrderItem" :key="index">
				<image :src="item.img"></image>
				<view class="right">
					<text class="title clamp">{{ item.serviceName }}</text>
					<view class="price-box">
						<text class="price">￥{{ item.promotionPrice }}</text>
						<text class="number">x {{item.serviceQuantity}}</text>
					</view>
					
				</view>
				<button @click="comment(item)" class="action-btn">去评价</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',//订单号
				pageInfo:[],//订单明细
			}
		},
		onLoad(option){
			this.orderId=option.orderId
			//调用请求然后获得订单的数据
			this.loadData(this.orderId)
		},
		methods: {
			//去评价
			comment(item){
				let items = JSON.stringify(item)
				console.log('去评价',items)
				uni.navigateTo({
					url:'../info/comment?ide=' + items,					
				})
				
			},
			
			loadData(){
				uni.request({
					url:this.baseurl + 'sOrder/statusorder',
					data:{
						//page:this.page,
						//size:5,
						//status:this.tabCurrentIndex,
						orderId:this.orderId,
					},
						success: (res) => {
						this.pageInfo=res.data.data,
						console.log('订单更多',this.pageInfo)
						}
					})
				},				
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type){
				this.payType = type;
			},
			
			stopPrevent(){}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}
	.action-btn {
		width: 160upx;
		height: 60upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		background: #fff;
		border-radius: 100px;
		&:after {
			border-radius: 100px;
		}
		&.recom {
			background: #fff9f9;
			color: $base-color;
			&:after {
				border-color: #f7bcc8;
			}
		}
		&.alreadyPay{
			background: #fff9f9;
			color: #1AAD19;
			&:after {
				border-color: #1AAD19;
			}
		}
	}
	
	//订单展示
	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;
	
		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}
	
		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}
	
		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}
	
		.g-item {
			display: flex;
			margin: 20upx 30upx;
	
			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}
	
			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}
	
			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}
	
			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}
	
			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;
	
				.price {
					margin-bottom: 4upx;
				}
				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}
	
			.step-box {
				position: relative;
			}
		}
	}
	
	
	/* 支付列表 */
	.pay-list{
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;
		.pay-item{
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;	
			position: relative;
		}
		.icon-weixinzhifu{
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}
		.icon-alipay{
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}
		.icon-xuanzhong2{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}
		.tit{
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}
	
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.price-content{
			padding-left: 30upx;
		}
		.price-tip{
			color: $base-color;
			margin-left: 8upx;
		}
		.price{
			font-size: 36upx;
			color: $base-color;
		}
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
		}
	}
	

</style>
